<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 视口标准化 -->
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, minimun-scale=1.0, maximun-scale=1.0, user-scale=no">
    <title>售货机2.0首页</title>
    <!-- 引入首页样式 -->
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
    <!-- 第一部分：nav导航栏 -->
    <section class="nav">
        <!-- 管理左侧 -->
        <div class="left">管理</div>
        <!-- 管理右侧 -->
        <div class="right">|</div>
    </section>

    <!-- 第二部分：header -->
    <section class="header">
        <!-- 今日收益 -->
        <div class="header_hd">0.00</div>
        <!-- 余额提现、累计收益 -->
        <div class="header_bd">
            <!-- 我的余额 -->
            <div class="balance">昨日收益</div>
            <!-- 累计收益 -->
            <div class="profit">累计收益</div>
        </div>
    </section>

    <!-- 第三部分：预警与订单 -->
    <section class="main">
        <a href="./mian/warn/warn2.html" class="warn1">缺电预警</a>
        <a class="order1">今日订单</a>
        <a class="order2">全部订单</a>
        <a href="./mian/warn/warn1.html" class="warn2">缺货预警</a>
    </section>

    <!-- 第四部分：设备管理 -->
    <section class="device">
        <!-- 我的设备 -->
        <div class="my_device">
            <!-- 第一层：我的设备--标题 -->
            <div class="title">我的设备</div>
            <!-- 第二层：我的设备--内容 -->
            <a class="my_dev" href="#">
                <!-- 未铺货设备 -->
                <div class="my_off">
                    <div class="off_dev">未铺货</div>
                </div>
                <!-- 已铺货设备 -->
                <div class="my_on">
                    <div class="on_dev">已铺货</div>
                </div>
            </a>
        </div>
        <!-- 下级设备 -->
        <div class="lower_device">
            <!-- 第一层：下级设备--标题 -->
            <div class="title">下级设备</div>
            <!-- 第二层：下级设备--内容 -->
            <a class="lower_dev" href="#">
                <!-- 未铺货设备 -->
                <div class="lower_off">
                    <div class="off_dev">未铺货</div>
                </div>
                <!-- 已铺货设备 -->
                <div class="lower_on">
                    <div class="on_dev">已铺货</div>
                </div>
            </a>
        </div>
    </section>

    <!-- 第五部分：主体部分 -->
    <section class="other">
        <a href="./mian/agent/agent.html" class="li_1">
            <div class="left"></div>
            <div class="right">代理管理</div>
        </a>
        <a href="./mian/business/business.html" class="li_2">
            <div class="left"></div>
            <div class="right">商家管理</div>
        </a>
        <a href="./mian/staff/staff.html" class="li_3">
            <div class="left"></div>
            <div class="right">员工管理</div>
        </a>
        <a href="./mian/run/run.html" class="li_4">
            <div class="left"></div>
            <div class="right">设备铺货</div>
        </a>
        <a href="./mian/goods/goods.html" class="li_5">
            <div class="left"></div>
            <div class="right">商品方案</div>
        </a>
        <a href="./mian/advs/adv.html" class="li_6">
            <div class="left"></div>
            <div class="right">广告管理</div>
        </a>
        <a class="li_7">
            <div class="left"></div>
            <div class="right">提现审核</div>
        </a>
        <a class="li_8">
            <div class="left"></div>
            <div class="right">系统配置</div>
        </a>
    </section>

    <!-- 第六部分：底部 -->
    <section class="footer">
        <!-- 首页 -->
        <a href="#"><img src="./images/管理蓝.png" alt=""></a>
        <!-- 统计 -->
        <a href="./other/stati/stati.html"><img src="./images/统计灰.png" alt=""></a>
        <!-- 收益 -->
        <a href="./other/profit/profit.html"><img src="./images/收益灰.png" alt=""></a>
        <!-- 我的 -->
        <a href="./mine/mine.html"><img src="./images/我的灰.png" alt=""></a>
    </section>
</body>

</html>